import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Type } from '@utils/Global'

class ReplayDmItem extends Component {
  renderTeacherIcon() {
    const { item } = this.props
    return item.sender.is_teacher ? <span className="dm_teacher">讲师</span> : null
  }
  renderQuestionIcon() {
    const { item } = this.props
    return item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION ? <span className="dm_question_flag">提问</span> : null
  }
  renderDetail() {
    const { item } = this.props
    let text = item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION ? item.data.question.data.text : item.data.text
    return  <span className="dm_text">{text}</span>
  }
  render() {
    const { item, index, color_theme } = this.props
    const _className = color_theme === 'red' ? 'dm_item red' : 'dm_item'
    return (
      <div className={_className} id={'dm_' + index}>
        <div className="dm_head">
          <img src={ item.sender.headimgurl }/>
        </div>
        <div className="dm_detail">
          <span className="dm_name">{ item.sender.nickname }</span>
          { this.renderTeacherIcon() }
          { this.renderQuestionIcon() }
          { this.renderDetail() }
        </div>
      </div>
    )
  }
}
const mapStateTopProps = (state) => {
  return {
    color_theme: state.MainScreenState.info.color_theme
  }
}
export default connect(mapStateTopProps)(ReplayDmItem)
